﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>预约记录详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        .navbar {
            display: none;
        }
        /* 添加简单的输入框样式 */
        .editable-input {
            border: 1px solid #e6e6e6;
            padding: 5px;
            border-radius: 2px;
        }
    </style>

</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">
            <h2>患者信息</h2>
        </div>
        <div class="layui-card-body">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col width="150">
                    <col width="200">
                    <col width="150">
                </colgroup>
                <tr>
                    <td>患者姓名</td>
                    <td id="patientName"></td>
                    <td>就诊卡号</td>
                    <td id="patientNo"></td>
                </tr>
                <tr>
                    <td>证件类型</td>
                    <td id="documentType"></td>
                    <td>证件号码</td>
                    <td id="documentNo"></td>
                </tr>
                <tr>
                    <td>手机号码</td>
                    <td id="phone"> </td>
                    <td>关系</td>
                    <td id="impact"> </td>
                </tr>

            </table>
        </div>
    </div>

    <div class="layui-card" style="margin-top: 20px;">
        <div class="layui-card-header">
            <h2>预约信息</h2>
        </div>
        <div class="layui-card-body">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="300">
                    <col width="150">
                    <col width="300">
                </colgroup>
                <tr>
                    <td>就诊医院</td>
                    <td id="hospital"></td>
                    <td>医院地址</td>
                    <td id="address2"></td>
                </tr>
                <tr>
                    <td>报道科室</td>
                    <td id="department"></td>
                    <td>预约体检时间</td>
                    <td id="physicalTime"></td>
                </tr>
                <tr>
                    <td>候诊时间</td>
                    <td id="waitingTime"></td>
                    <td>体检套餐</td>
                    <td id="packageName"></td>
                </tr>
                <tr>
                    <td>体检费</td>
                    <td id="medicalexaminationfee"></td>
                    <td>预约时间</td>
                    <td id="bookingTime"></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td id="state"></td>
                    <td>报道时间 </td>
                    <td id="registrationTime"></td>
                </tr>
                <tr>
                    <td>预约备注</td>
                    <td>
                        <input type="text" id="remark" name="remark" readonly class="layui-input editable-input">
                    </td>
                    <td>操作</td>
                    <td>
                        <button type="button" id="saveBtn" class="layui-btn" style="display: none;">保存</button>
                    </td>
                </tr>

            </table>
        </div>
    </div>



    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>

    <script>

        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;

            // 使用URLSearchParams API
            var urlParams = new URLSearchParams(window.location.search);
            var physicalId = urlParams.get('physicalId') || 0;
            var originalRemark = ''; // 存储原始备注值
            var isEditing = false;   // 编辑状态标志

            function getregistration() {
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/ReserInstruc/FtPhysicalexamination?physicalId=${physicalId}`,
                    success: function (res) {
                        var data = res.data;
                        console.log(data)
                        // 患者信息部分
                        $('#patientName').html(data.patientName || '');
                        $('#patientNo').html(data.patientNo || '');
                        $('#documentNo').html(data.documentNo || '');
                        $('#phone').html(data.phone || '');
                        $('#impact').html(data.impact || '');
                        $('#documentType').html(data.documentType || '');
                        // 预约信息部分
                        $('#hospital').html(data.hospital || '');
                        $('#address2').html(data.address2 || '');
                        $('#department').html(data.department || '');
                        $('#physicalTime').html(formatDateTime(data.physicalTime));
                        $('#waitingTime').html(data.waitingTime || '');
                        $('#packageName').html(data.packageName || '');
                        $('#medicalexaminationfee').html(data.medicalexaminationfee ? '¥' + parseFloat(data.medicalexaminationfee).toFixed(2) : '¥0.00');
                        $('#bookingTime').html(formatDateTime(data.bookingTime));

                        $('#state').html(data.state);
                        $('#registrationTime').html(formatDateTime(data.registrationTime));
                        $('#remark').val(data.remark || '');
                        originalRemark = data.remark || ''; // 保存原始备注值
                    }
                });
            }
            getregistration()

            function formatDateTime(dateStr) {
                if (!dateStr) return '';

                try {
                    const date = new Date(dateStr);
                    return date.toLocaleString(); // 或者使用更具体的格式如：formatDate(date)
                } catch (e) {
                    return dateStr; // 如果无法解析，返回原始字符串
                }
            }

            // 更详细的日期格式化函数（可选）
            function formatDate(date) {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');

                return `${year}-${month}-${day} ${hours}:${minutes}`;
            }

            // 点击备注输入框进入编辑状态
            $('#remark').on('click', function () {
                if (!isEditing) {
                    isEditing = true;
                    $('#saveBtn').show();

                    // 启用备注输入框
                    $(this).removeAttr('readonly');

                    // 聚焦到备注输入框
                    $(this).focus();
                }
            });

            // 保存备注信息
            function saveRemark() {
                var remark = $('#remark').val().trim();

                // 表单验证
                if (!remark) {
                    layer.msg('请输入预约备注', { icon: 5 });
                    return;
                }

                // 创建要提交的数据
                var pdata = {
                    physicalId: physicalId,
                    remark: remark
                };

                // 显示加载提示
                var loadingIndex = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
        
                // 发送 Ajax 请求
                $.ajax({
                    url: `https://localhost:7027/api/Physicalexamination/UpdatePhysicalexamination`,
                    data: JSON.stringify(pdata),
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        layer.close(loadingIndex); // 关闭加载提示

                        if (res.code === 100) {
                            layer.msg('修改成功', { icon: 1 });
                            originalRemark = remark; // 更新原始备注值

                            // 恢复到查看状态
                            isEditing = false;
                            $('#saveBtn').hide();

                            // 禁用备注输入框
                            $('#remark').attr('readonly', 'readonly');
                        } else {
                            layer.msg(res.msg || '修改失败', { icon: 5 });
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.close(loadingIndex); // 关闭加载提示
                        layer.msg(`请求出错: ${textStatus} - ${errorThrown}`, { icon: 5 });
                        console.error('请求出错:', jqXHR, textStatus, errorThrown);
                    }
                });
            }

            // 绑定保存按钮点击事件
            $('#saveBtn').on('click', saveRemark);

            // 点击其他区域取消编辑状态
            $(document).on('click', function (e) {
                if (!isEditing) return;

                // 如果点击的不是备注输入框和保存按钮
                if (!$(e.target).closest('#remark, #saveBtn').length) {
                    isEditing = false;
                    $('#saveBtn').hide();
                    $('#remark').val(originalRemark).attr('readonly', 'readonly');
                }
            });
        });
    </script>
</body>
</html>